<template>
  <div class="filters">
    <button 
      @click="selectFilter('active')" 
      :class="{ active: filter === 'active' }"
    >
      未完成
    </button>
    <button 
      @click="selectFilter('completed')" 
      :class="{ active: filter === 'completed' }"
    >
      已完成
    </button>
     <button 
      @click="selectFilter('all')" 
      :class="{ active: filter === 'all' }"
    >
      全部
    </button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const props = defineProps({
  modelValue: {
    type: String,
    default: 'all'
  }
});

const emit = defineEmits(['update:modelValue']);

const filter = ref(props.modelValue);

const selectFilter = (value) => {
  filter.value = value;
  emit('update:modelValue', value);
};
</script>

<style scoped>
.filters {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.filters button {
  margin: 0 5px;
  padding: 5px 10px;
  background: none;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
}

.filters button.active {
  background-color: #42b983;
  color: white;
  border-color: #42b983;
}
</style>